<template>
	<view class="wrapper">
		<view class="notice" v-if="tips.length">
			<wybNoticeBar :text="tips" type="vert" :show-more="false" class="notice-box" bgColor="#cf0013" color="#ffffff" width="300" v-if="tips.length > 0"/>
		</view>
		<view class="hb">
			<!-- <image src="https://funimg.pddpic.com/spi_main/cover_head.png.slim.png" mode="" class="hb-head"></image> -->
			<view class="hb-hd">
				<view class="hb-hd-content">
					<view class="hb-hd-content-head">
						<view class="hb-hd-content-head-user">
							<image :src="userInfo.avatar" mode="" class="hb-hd-content-head-user-logo" @click="goUser"></image>
							<view  class="hb-hd-content-head-user-name" @click="goUser">
								{{userInfo.real_name}}
							</view>
							<view class="hb-hd-content-head-user-center" @click="goUser">
								<view class="hb-hd-content-head-user-center-text">
									赚钱攻略
								</view>
								<view class="iconfont iconiconfontjiantou2"></view>
							</view>
						</view>
						<view class="hb-hd-content-head-money">
							<template>
								<view class="hb-hd-content-head-money-balance" @click="withDraw">
									<view class="hb-hd-content-head-money-balance-do">￥</view>
										<dashCountTo :startVal="oldVal" :endVal="newVal" :decimals='2' :duration='1500'></dashCountTo>
									<view class="hb-hd-content-head-money-balance-wx" @click="withWardw">
										可提现
									</view>
								</view>
							</template>
							
						</view>
						<view class="hb-hd-content-head-btn" @click="doTask()">
							立即赚红包
						</view>
					</view>
				</view>
			</view>
			<view class="hb-bd">

				<view class="hb-bd-turn" style="display:flex;align-items: start;justify-content: center;">
					<view style="margin-right: 20px;display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<image src="https://videocun.oss-cn-beijing.aliyuncs.com/7da2d202202102240069700.png" style="width:100rpx;height:100rpx;margin-bottom:20rpx;">
						<view style="font-size:12px;color:#fff;text-align: center;">分享红包</view>
					</view>
					
					<image src="https://videocun.oss-cn-beijing.aliyuncs.com/ed9c9202202102310221511.png" style="width:50px;height:20px;margin-top: 20px;">

					<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<image src="https://videocun.oss-cn-beijing.aliyuncs.com/87bbc20220210224005129.png" style="width:100rpx;height:100rpx;margin-bottom:20rpx;">
						<view style="font-size:12px;color:#fff;text-align: center;">好友领红包并成功使用</view>
					</view>

					<image src="https://videocun.oss-cn-beijing.aliyuncs.com/ed9c9202202102310221511.png" style="width:50px;height:20px;margin-top: 20px;margin-right: 10px;">

					<view>
						<image src="https://videocun.oss-cn-beijing.aliyuncs.com/de41c202202102240059158.png" style="width:100rpx;height:100rpx;margin-bottom:10rpx;">
						<view style="font-size:12px;color:#fff;text-align: center;">赏金到账</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="copyright"></view>
		
		 <view style="width: 600rpx;margin: 0 auto;background: #fff;border-radius: 30rpx;margin-bottom: 80px; box-shadow: 0 0 10px rgba(0,0,0,.1);">
        	<custom-tabs index="0" :animation="true" tabPadding="40" :scrollY="true" :flex="false" @changeIndex="changeIndex">
				<custom-tab-pane label="已分享">
					<view style="width: 600rpx;">
						<view class="view flex-row align-center" style="border-bottom:1px solid #eee;padding-left:20rpx;padding-right:20rpx;padding-bottom:20rpx;margin-bottom:10rpx;">
							<view style="font-size:24rpx;color:#666;" class="flex-1 text-left">分享用户</view>
							<view style="font-size:24rpx;color:#666;" class="flex-1 text-center">红包金额</view>
							<view style="font-size:24rpx;color:#666;" class="flex-1 text-right">分享时间</view>
						</view>
						
						<view style="max-height:33vh;overflow-y:auto;" v-if="list.length > 0">
							<view class="view flex-row align-center" style="border-bottom:1px solid #eee;padding-right:20rpx;margin-bottom:14rpx;" v-for="(item,index) in list" :key="index">
								<view  class="flex-1 text-left view flex-row align-center" style="padding-top:10rpx;padding-bottom:10rpx;">
									<image class="avatar" :src='item.user_img' v-if="item.user_img"></image>
									<image v-else class="avatar" src="/static/images/f.png" mode=""></image>
									
									<text style="font-size:24rpx;color:#782a09;width: 100rpx;">{{ item.user_name }}</text>
		
								</view>
								<view style="font-size:24rpx;color:#782a09;" class="flex-1 text-center">{{ item.coupon_price }}</view>
								<view style="font-size:24rpx;color:#782a09;" class="flex-1 text-right">{{ item.add_time | fmtTime}}</view>
							</view>
						</view>
						<view v-if="list.length == 0">
							<emptyPage title='暂无记录~'></emptyPage>
						</view>

					</view>
				</custom-tab-pane>
				<!-- <custom-tab-pane label="待到账">
					<view style="width: 600rpx;">
						<view class="view flex-row align-center" style="border-bottom:1px solid #eee;padding-left:20rpx;padding-right:20rpx;padding-bottom:20rpx;margin-bottom:10rpx;">
							<view style="font-size:24rpx;color:#666;" class="flex-1 text-left">分享用户</view>
							<view style="font-size:24rpx;color:#666;" class="flex-1 text-center">待到账金额</view>
							<view style="font-size:24rpx;color:#666;" class="flex-1 text-right">分享时间</view>
						</view>	
						
						<view style="max-height:33vh;overflow-y:auto;" v-if="list.length > 0">
							<view class="view flex-row align-center" style="border-bottom:1px solid #eee;padding-right:20rpx;margin-bottom:14rpx;" v-for="(item,index) in list" :key="index">
								<view  class="flex-1 text-left view flex-row align-center" style="padding-top:10rpx;padding-bottom:10rpx;">
									<image class="avatar" :src='item.user_img' v-if="item.user_img"></image>
									<image v-else class="avatar" src="/static/images/f.png" mode=""></image>
									
									<text style="font-size:24rpx;color:#782a09;width: 100rpx;">{{ item.user_name }}</text>
		
								</view>
								<view style="font-size:24rpx;color:#782a09;" class="flex-1 text-center">{{ item.coupon_price }}</view>
								<view style="font-size:24rpx;color:#782a09;" class="flex-1 text-right">{{ item.add_time | fmtTime}}</view>
							</view>
						</view>
						<view v-if="list.length == 0">
							<emptyPage title='暂无记录~'></emptyPage>
						</view>

					</view>
				</custom-tab-pane> -->
				
			</custom-tabs>
		</view>
		<tabBar :dataConfig="tabBar.default" :pagePath="'/pages/activity/redpackindex/index'" @click.native="bindEdit('tabBar','default')"></tabBar>
	</view>
</template>

<script>
	let app = getApp();
	const moment = require('@/libs/moment.min')
	import emptyPage from '@/components/emptyPage.vue'

	import tabBar from "@/pages/index/components/tabBar.vue";
	import { getDiy } from '@/api/api.js';
	import {mapState, mapGetters, mapMutations} from 'vuex'
    import wybNoticeBar from '../wyb-noticeBar'
	import dashCountTo from '../dash-countTo/dash-countTo'
	import customTabPane from '../custom-tab-pane/custom-tab-pane'
	import customTabs from '../custom-tabs/custom-tabs'
	import { getCouponsRecord } from '@/api/activity.js'
	import {
		getUserInfo
	} from '@/api/user.js';
	export default {
		filters: {
			fmtTime(val) {
				return moment.unix(val).format('YYYY-MM-DD')
			}
		},
        components: {
			wybNoticeBar,
			dashCountTo,
			customTabPane,
			customTabs,
			emptyPage,
			tabBar
		},
		data() {
			return {
				tips: [
					'手机1508921***的用户分享红包获取99元余额',
					'手机1541412***的用户分享红包获取99元余额',
					'手机1372021***的用户分享红包获取99元余额'
				],
				userInfo: {},
				lotteryList: [],
				tabBar:{},//导航
				list: [],
				type: 1,
				animationData: {},
				lotteryModalShow: false,
				hongbaoMoneyShow: false,
				oldVal: 0.00,
				newVal: 0.00,
				award: {},
				loginShow: false,
				ShareConfig: {},
				ad: null,
				config: getApp().globalData.config,
				lotteryDoing: false
			}
		},
		computed: {
			// ...mapState(['userInfo', 'lotteryNum', 'balance']),
			// ...mapGetters(['isLogin']),
		},
		watch: {
		    balance: function(newVal, oldVal) {
				this.oldVal = oldVal
				this.newVal = newVal
		    },
			deep:true
		},
		onLoad() {
		},
		onShow(){
		   // this.$store.dispatch('getUserInfo');
			// this.newVal = this.balance
			this.diyData();
			this.getUserInfo()
			this.getRecord()
		},
		onShareAppMessage(res) {
			return this.shareConfig
		},
		onShareTimeline(){
			return getApp().shareConfig('timeline')
		},
		methods: {
			async getRecord() {
				const res = await getCouponsRecord(this.type)
				this.list = res.data
			},
			withWardw() {
				uni.navigateTo({
					 url: '/pages/users/user_cash/index'
				});
			},
			changeIndex(index) {
				if (index == 0) {
					this.type = 1
					this.getRecord()
				} else {
					this.type = 2
					this.getRecord()
				}
            },
			login() {
				this.loginShow = true
			},
			loginClose() {
				this.loginShow = false
			},
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
					that.newVal = res.data.now_money
				})
			},
			diyData() {
				let that = this;
				getDiy().then(res => {
					let data = res.data;
					that.tabBar = data.tabBar;
				});
			},
			bindEdit(name,dataName) {
				if (app.globalData.isIframe) {
					window.parent.postMessage(
						{
							name: name,
							dataName: dataName,
							params: {}
						},
						'*'
					);
					return;
				}
			},
			slowTunr(){
				setInterval(() => {
					var animation = uni.createAnimation({
						duration: 2000,
					    timingFunction: 'linear',
					})
					this.animation = animation
					animation.rotate(this.turnRotate * 30).step()	
					this.animationData = animation.export()
					this.turnRotate ++
				}, 2000)
			},
			
			doTask(){
				uni.navigateTo({
					url: "/pages/activity/user_coupon/index"
				})
			},
			openHongbao(){
				this.hongbaoMoneyShow = true
			},
			openLotteryModal(){
				this.lotteryModalShow = true
			},
			closeLotteryModal(){
				this.lotteryModalShow = false
				this.hongbaoMoneyShow = false
				this.$store.dispatch('getUserInfo');
			},
			goUser(){
				// uni.navigateTo({
				// 	url: "/pages/user/user"
				// })
			},
			withDraw(){
				uni.navigateTo({
					url: "/pages/withdraw/withdraw"
				})
			},
			getShareConfig(){
				this.shareConfig = getApp().shareConfig()
				var pages = getCurrentPages();
				var route = pages[pages.length - 1].route;
				
			},
			async fetchConfigTips() {
				const res = await this.$api.fetchConfigTips()
				this.tips = res.data.map(item=>item.msg)
			},
			async fetchConfigAd() {
				const res = await this.$api.fetchConfigAd()
				console.log(res.data)
				this.ad = res.data
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #d72128;
	}
	.avatar {
		display: block;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		margin:  auto 10rpx;
	}
	.notice{
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.hb{
		display: flex;
		flex-wrap: wrap;
		margin: 0 66rpx;
		margin-top: 160rpx;
		position: relative;
		background: linear-gradient( 180deg ,#fce4a9,#fd9f6a 55%,#f5783e);
		border-radius: 50rpx;
		&-hd{
			width: 594rpx;
			margin: auto;
			margin-top: -120rpx;
			background-color: #fff9eb;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;
			// margin-bottom: -60rpx;
			box-sizing: border-box;
			&-content{
				width: 574rpx;
				margin: 20rpx auto;
				background-color: #FFFFFF;
				border: 1px solid rgba(254,230,208,1);
				border-radius: 20rpx 20rpx 0 0;
				position: relative;
				box-sizing: border-box;
				height: 100%;
				&-head{
					width: 100%;
					height: 340rpx;
					&-user{
						display: flex;
						align-items: center;
						padding-top: 10rpx;
						&-logo{
							width: 80rpx;
							height: 80rpx;
							border-radius: 60rpx;
							margin-right: 10rpx;
							margin-left: 20rpx;
							flex-shrink: 0;
						}
						&-name{
							font-size: 30rpx;
							color: #b9562d;
						}
						&-center{
							flex-shrink: 0;
							margin-left: auto;
							background: #fda673;
							color: #fff;
							font-size: 26rpx;
							height: 50rpx;
							display: flex;
							align-items: center;
							border-radius: 50rpx 0 0 50rpx;
							padding-left: 20rpx;
							font-weight: 500;
							.iconiconfontjiantou2{
								font-size: 26rpx;
								padding: 0 4rpx;
							}
						}
					}
					&-money{
						text-align: center;
						font-size: 60rpx;
						line-height: 60rpx;
						color: #d72128;
						display: flex;
						align-items: flex-end;
						justify-content: center;
						margin-top: 40rpx;
						&-balance{
							display: flex;
							align-items: flex-end;
							justify-content: center;
							position: relative;
							&-do{
								font-size: 38rpx;
								line-height: 38rpx;
								margin-bottom: 4rpx;
							}
							&-wx{
								font-size: 24rpx;
								line-height: 1;
								position: absolute;
								right: 0;
								top: -20rpx;
								transform: translate(100%);
								background-color: #fcc68e;
								padding: 8rpx 10rpx;
								border-radius: 14rpx 14rpx 14rpx 0;
								color: #782a09;
							}
						}
					}
					&-btn{
						margin: auto;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 80rpx;
						width: 300rpx;
						margin-top: 30rpx;
						border-radius: 80rpx;
						background-color: #f33d31;
						color: #FFFFFF;
						// background: linear-gradient(to right, #fef8de , #fbe792);
						box-shadow: 0 4rpx 12rpx #b62e25; //8rpx 8rpx 16rpx #c5c5c5
						text-align: center;
						// color: #e81e10;
						animation-timing-function:ease-in-out;
						animation-name:breathe;
						animation-duration:500ms;
						animation-iteration-count:infinite;
						animation-direction:alternate;
					}
				}
				&::after{
					position: absolute;
					content: '';
					width: 548rpx;
					height: 16rpx;
					top: -14rpx;
					left: 12rpx;
					background: rgba(255,255,255,1);
					border: 1px solid rgba(254,230,208,1);
					border-width: 1px 1px 0 1px;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					box-sizing: border-box;
				}
			}
		}
		&-bd{
			width: 100%;
			position: relative;
			background: url(https://funimg.pddpic.com/spi_main/cover_body.png.slim.png) no-repeat;
			background-size: 100% 100%;
			padding-top: 70rpx;
			padding-bottom: 40rpx;
			margin-top: -60rpx;
			box-sizing: border-box;
			&-turn{
				width: 566rpx;
				height: 566rpx;
				margin: auto;
				box-sizing: border-box;
				position: relative;
				&-content{
					width: 100%;
					height: 100%;
					padding: 40rpx;
					box-sizing: border-box;
					background: url(https://funimg.pddpic.com/spi_main/turntable_bg.png.slim.png);
					background-size: 100%;
					&.rotate{
						animation: turn 30s linear infinite;
						animation-fill-mode: forwards;
					}
					&-block{
						width: 100%;
						height: 100%;
						border-radius: 50%;
						overflow: hidden;
						position: relative;
						transform: rotate(1deg);
						&-item{
							position: absolute;
							left: 50%;
							transform-origin: bottom center;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							flex-direction: column;
							width: 243rpx;
							height: 243rpx;
							&-name{
								font-size: 28rpx;
								line-height: 1;
								font-weight: bold;
								color: rgba(195, 83, 31, 1);
								margin-top: 20rpx;
								margin-bottom: 10rpx;
							}
							&-img{
								display: block;
								width: 84rpx;
								height: 84rpx;
							}
							&.item0{
								transform: translateX(-50%) rotate(0deg);
							}
							&.item1{
								transform: translateX(-50%) rotate(60deg);
							}
							&.item2{
								transform: translateX(-50%) rotate(120deg);
							}
							&.item3{
								transform: translateX(-50%) rotate(180deg);
							}
							&.item4{
								transform: translateX(-50%) rotate(240deg);
							}
							&.item5{
								transform: translateX(-50%) rotate(300deg);
							}
						}
					}
				}
				&-btn{
					width: 282rpx;
					height: 286rpx;
					background: url(https://funimg.pddpic.com/spi_main/turntable_cursor_v2.png.slim.png) no-repeat;
					background-size: 100%;
					position: absolute;
					top: 180rpx;
					left: 144rpx;
					padding-top: 80rpx;
					text-align: center;
					box-sizing: border-box;
					&-lottery{
						color: rgba(253,37,81,1);
						font-weight: 600;
						font-size: 46rpx;
						line-height: 46rpx;
						background: linear-gradient( 180deg, rgba(255,254,251,1) 0%, rgba(255,204,149,1) 100% );
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						--animate-duration: 2s;
					}
					&-last{
						margin-top: 8rpx;
						color: rgba(253,37,81,1);
						font-weight: 600;
						font-size: 24rpx;
						line-height: 24rpx;
						background: linear-gradient( 180deg, rgba(255,254,251,1) 0%, rgba(255,204,149,1) 100% );
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}
		}
	}
	.copyright{
		height: 30rpx;
	}
	.lotteryModal{
		width: 100%;
		height: 100%;
		background-color: rgba(000, 000, 000, 1);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		&-content{
			--animate-duration: 0.3s;
			&-body{
				width: 600rpx;
				padding: 40rpx 0;
				// background-color: #DB5C4E;
				border-radius: 8px;
				position: relative;
				&-bg{
					position: absolute;
					position: absolute;
					top: -100rpx;
					left: -100rpx;
					width: 800rpx;
					height: 800rpx;
				}
				&-title{
					font-size: 42rpx;
					color: #FBECCB;
					font-weight: 700;
					text-align: center;
					margin-bottom: 30rpx;
				}
				&-bd{
					position: relative;
					z-index: 9;
					width: 320rpx;
					height: 485rpx;
					margin: auto;
					&-bg1{
						position: absolute;
						z-index: -1;
						top: 0;
						left: 0;
						width: 100%;
						height: 485rpx;
					}
					&-bg2{
						position: absolute;
						z-index: -1;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 166rpx;
					}
					&-bg3{
						position: absolute;
						z-index: -1;
						bottom: 60rpx;
						left: 50%;
						width: 140rpx;
						height: 140rpx;
						transform: translate(-50%);
					}
					&-title{
						padding-top: 120rpx;
						font-size: 30rpx;
						text-align: center;
						color: #FFFFFF;
						&-name{
							margin-bottom: 10rpx;
						}
					}
					&-money{
						padding-top: 130rpx;
						font-size: 26rpx;
						text-align: center;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						--animate-duration: 2s;
						&-num{
							font-size: 60rpx;
							line-height: 1;
						}
						&-yuan{
							
						}
					}
				}
				&-question{
					margin: auto;
					display: block;
					border: none!important;
					font-size: 28rpx;
					color: #576b95!important;
					margin-top: 30rpx;
				}
			}
			&-cancel{
				width: 50rpx;
				height: 50rpx;
				margin: auto;
				display: block;
				margin-top: 60rpx;
			}
		}
		
	}
	@keyframes turn{
		0% { transform:rotate(0deg); }
		25% { transform:rotate(90deg); }
		50% { transform:rotate(180deg); }
		75% { transform:rotate(270deg); }
		100% { transform:rotate(360deg); }
	}
	@keyframes breathe {
		0% {
			opacity:1;
			transform: scale(.90) ;
		}
		100% {
			opacity:1;
			transform: scale(1);
		}
	}

	.ad {
		position: relative;
		z-index: 1;
		// width: 90%;
		// margin: 0 auto;
	}
</style>
